<template>
    <div>
      <v-row>
        <v-col cols="12" sm="6" md="3">
          <stat-card
            title="文本数据总量"
            :value="stats.textCount"
            icon="mdi-text-box"
            color="primary"
          />
        </v-col>
        
        <v-col cols="12" sm="6" md="3">
          <stat-card
            title="图片数据总量"
            :value="stats.imageCount"
            icon="mdi-image"
            color="secondary"
          />
        </v-col>
        
        <v-col cols="12" sm="6" md="3">
          <stat-card
            title="今日新增文本"
            :value="stats.todayTexts"
            icon="mdi-text-box-plus"
            color="info"
          />
        </v-col>
        
        <v-col cols="12" sm="6" md="3">
          <stat-card
            title="今日新增图片"
            :value="stats.todayImages"
            icon="mdi-image-plus"
            color="success"
          />
        </v-col>
      </v-row>
      
      <v-row>
        <v-col cols="12" md="6">
          <line-chart
            title="最近7天数据增长"
            :data="growthData"
          />
        </v-col>
        
        <v-col cols="12" md="6">
          <pie-chart
            title="数据分布"
            :data="distributionData"
          />
        </v-col>
      </v-row>
      
      <v-row>
        <v-col cols="12">
          <v-card>
            <v-card-title>最近爬虫日志</v-card-title>
            <v-data-table
              :headers="logHeaders"
              :items="recentLogs"
              :items-per-page="5"
            />
          </v-card>
        </v-col>
      </v-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useDataStore } from '@/stores/data'
  
  const dataStore = useDataStore()
  const stats = ref({
    textCount: 0,
    imageCount: 0,
    todayTexts: 0,
    todayImages: 0
  })
  
  const growthData = ref([])
  const distributionData = ref([])
  const recentLogs = ref([])
  
  const logHeaders = [
    { title: '时间', key: 'timestamp' },
    { title: '类型', key: 'type' },
    { title: '状态', key: 'status' },
    { title: '消息', key: 'message' }
  ]
  
  onMounted(async () => {
    await dataStore.fetchDashboardData()
    stats.value = dataStore.dashboardStats
    growthData.value = dataStore.growthData
    distributionData.value = dataStore.distributionData
    recentLogs.value = dataStore.recentLogs
  })
  </script>